<template>
	<Editor class="editor" :value="mdValue" @change="onMdChange" :plugins="plugins" />
</template>

<script setup>
import { defineProps } from "vue";
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import { Editor } from "@bytemd/vue-next";

// 定义插件
const plugins = [gfm(), highlight()];
defineProps({
	mdValue: {
		type: String,
		default: ""
	},
	onMdChange: {
		type: Function,
		default: v => {
			console.log(v);
		}
	}
});
</script>
<style scoped>
.editor {
	width: 100%;
}
:deep(.bytemd-fullscreen.bytemd) {
	z-index: 10000;
}
</style>
